/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component, Fragment } from 'react';
import { Form, Input, DatePicker, message, Button, Tabs, Radio } from 'antd';
import { connect } from 'dva';
import L from 'leaflet';   //引入leaflet

import './index.less';
import './../Home/leaflet.less';
import P1 from './../../images/valve2.png';

const { TabPane } = Tabs;
const ButtonGroup = Button.Group;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
    };
  }

  componentDidMount() {

    const that = this;
    that.renderMap();
  }

  renderMap = () => {
    const that=this
    var map = this.map = L.map('workstationDiv', {
      crs: L.CRS.Simple,
      minZoom: -3,
      zoom: 1,
      maxZoom: 1,
      zoomSnap: 0.25,
    });
    console.log('this.props.name',this.props.name)
    var bounds = [[0, 0], [950, 1689]];
    var image = L.imageOverlay(P1, bounds).addTo(map);
    map.fitBounds(bounds);

    var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svgElement.setAttribute('viewBox', '52 44 1573 976');
    svgElement.innerHTML = `
    <g>
        <path class="leaflet-ant-path ant-path-1591603316531 leaflet-clickable" stroke-linejoin="round"
              stroke-linecap="round" stroke="#ffffff" stroke-opacity="0.5" stroke-width="5" stroke-dasharray="10,20"
              fill="none" d="M50 754L1580 754" data-animated="true" style="animation-duration: 38.037s;"></path>
    </g>
    `;
    L.svgOverlay(svgElement, bounds).addTo(map);

    map.on('click', function(e) {
      console.log(e.latlng.toString());
      return false;
    });

    map.on('zoomend', function(e) {
      console.log(map.getZoom());
      const zoom=map.getZoom();
      return false;
      if(zoom<0 && zoom>=-1){
        that.oMarker.setLatLng([650, 1350]);
      }else if(zoom<-1&& zoom>=-2){
        that.oMarker.setLatLng([650, 1500]);
      }else if(zoom<-2){
        that.oMarker.setLatLng([650, 1700]);
      }
    });
    // this.renderPopup();
  };
  renderPopup = () => {
    var myIcon = L.divIcon({ className: 'my-div-icon' });
    const html1 = document.querySelector('#pop1');
    const oMarker = this.oMarker = L.marker([650, 1350], { icon: myIcon }).addTo(this.map);
    oMarker.bindPopup(html1, {
      closeOnClick: false,
      autoClose: false,
      maxHeight: 250,
      maxWidth: 490,
      className: 'content22',
      offset: [0, 0],
    }).on('popupopen', function(params) {
      console.log(params);
    }).openPopup();
  };
  render() {
    const defaultColumnProperties = {
      resizable: true,
    };
    return (
      <div style={{ height: '100%', position: 'relative' }}>
          {/*<div className={'leaflet-time'}>
          数据采集时间 <span>2020-12-05 12:21:09</span>
        </div>
      <div id={'pop1'} className={'pop-container'}>
          <div className="pop-content" style={{ padding: 0 }}>
            <div className="item">
            fitBounds  <li>流量(m)</li>
              <li>阀门状态</li>
            </div>
            <div className="item2">
              <li>{123.65} </li>
              <li>开</li>
            </div>
          </div>
        </div>
        */}
        <div id={'workstationDiv'} style={{
          display: 'flex',
          fontSize: '30px',
          height: '576px',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        </div>
      </div>

    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
